<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
    <title>场馆状态信息查询</title>
    <style type="text/css">
        table {
            border-collapse: collapse;
            width: 80%;
            margin: auto;
        }
        th, td {
            border: 1px solid black;
            padding: 10px;
            text-align: center;
        }
        th {
            width: 30%;
            background-color: lightblue;
        }
        td{
            width: 70%;
        }
        h1,form,input{
            text-align: center;
        }
        select{
            width: 100px;
            height: 30px;
        }
        a{
            text-decoration: none;
        }
        button{
            background-color: orange;
        }
        #result{
            position: fixed;
            right: 50px;
        }
    </style>
    <script type="text/javascript">

        function changecontent(s){
            // 获取标签的id
            id =s.id;
            /* 获得表格数据 */
            var name = $(s).html();
            /* 清空数据 */
            $(s).html("");
            /* 在td里面加一个表单 ,,并且添加失焦时间*/
            $(s).parent().append("<input value='"+name+"'/>");
            /* 通过父标签的子标签得到input表单 */
            $(s).parent().children("input").attr("onblur","nameblur(this,'"+name+"')");
            /* 通过focus主动触发，获得焦点 */
            $(s).parent().children("input").focus();
            /* 删掉原有的标签 */
            $(s).remove();
        }
        /* 表单失焦事件 */
        function nameblur(inp,name){
            /* 判断表单内的值是否改变 */
            var val = $(inp).val();

            if(val != name){
                alert("这里是发送异步请求，修改数据库操作");
                $.ajax({
                    url:"http://localhost:8080/stadium/admin/updateStadiumInfo",
                    type:"get",
                    data:{"id":id,"newcontent":val,"oldcontent":name},
                    dataType:"text",
                    // 请求成功做的事
                    success:function (data){
                      alert("将数据"+id+"由   "+name+"   修改为  "+val);
                    },
                    error:function (message){
                        alert("提交失败");
                    }
                    })
            }
            /* 在td里面加回来span,值就是val*/
            $(inp).parent().append("<span onclick='changecontent(this)'>"+val+"</span>");
            /* 删除input标签 */
            $(inp).remove();
        }
    </script>



</head>
<body>
<h1 >查询修改场馆信息</h1>
<script>
    $(document).ready(function() {
        console.log("进来了**********")
        $.get("../admin/getStadiumNames", function(data) {
            // 将获取到的数据渲染到下拉框中
            var select = document.getElementById("selectName");
            for (var i = 0; i < data.length; i++) {
                var option = document.createElement("option");
                option.text = data[i];
                option.value = data[i];
                select.add(option);
            }
        });
    });
</script>
<form action="../admin/queryStadiumInfo" method="get">
    <select name="name" id="selectName">
        <option>--请选择--</option>

    </select>
    <input type="submit" name="submit">
</form>
<%
    Object stadiumInfo = request.getAttribute("stadiumInfo");
//    Object option = request.getAttribute("option");
%>
<table id="tabletext">
   <tr>
       <th>场馆名</th>
       <td><span onclick="changecontent(this)" id="stadiumName">${stadiumInfo.stadiumName}</span></td>
   </tr>
    <tr>
        <th>场馆数量</th>
        <td><span onclick="changecontent(this)" id="stadiumNum">${stadiumInfo.stadiumNum}</span></td>
    </tr>
    <tr>
        <th>场馆描述</th>
        <td><span onclick="changecontent(this)" id="description">${stadiumInfo.description}</span></td>
    </tr>
    <tr>
        <th>开馆时间</th>
        <td><span onclick="changecontent(this)" id="startTime">${stadiumInfo.startTime}</span></td>
    </tr>
    <tr>
        <th>闭馆时间</th>
        <td><span onclick="changecontent(this)" id="endTime">${stadiumInfo.endTime}</span></td>
    </tr>
    <tr>
        <th>租赁价格</th>
        <td><span onclick="changecontent(this)" id="rentalPrice">${stadiumInfo.rentalPrice}</span></td>

    </tr>
    <tr>
        <th>最大限制人数</th>
        <td><span onclick="changecontent(this)" id="limitNum">${stadiumInfo.limitNum}</span></td>

    </tr>
    <tr>
        <th>创建时间</th>
        <td><span onclick="changecontent(this)" id="createTime">${stadiumInfo.createTime}</span></td>
    </tr>

</table>

    <button id="result" type="button" onclick="download()">下载附件</button>

<script>
    function download() {
        var name = "${requestScope.option}";
        console.log(111);
        console.log(name);
        // const name = encodeURIComponent($("#selectName").val());
        $.ajax({
            url: "http://localhost:8080/stadium/common/downLoadQueryStadiumByName",
            method: "POST",
            data: {name: name},
            xhrFields: {
                responseType: 'blob'
            },
            success: function (data) {
                var a = document.createElement('a');
                var url = window.URL.createObjectURL(data);
                console.log(url)
                a.href = url;
                a.download = "queryStadiumByName.csv";
                document.body.append(a);
                a.click();
                window.URL.revokeObjectURL(url);
                $(a).remove();
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log("Error:", errorThrown);
            }
        });
        console.log("111")
    }

</script>
</body>
</html>